<template>
	<view style="height:100vh">
		<layout layoutTitle="节能预警">
			<view class="energy-warning-container">
				<view class="warning-header">
					<view class="header-title">
						<uni-icons type="notification-filled" size="24" color="#f39c12"></uni-icons>
						<text>节能预警中心</text>
					</view>
					<view class="header-stats">
						<view class="stat-card status-success">
							<text class="stat-value">24</text>
							<text class="stat-label">正常</text>
						</view>
						<view class="stat-card status-warning">
							<text class="stat-value">8</text>
							<text class="stat-label">预警</text>
						</view>
						<view class="stat-card status-danger">
							<text class="stat-value">3</text>
							<text class="stat-label">严重</text>
						</view>
					</view>
				</view>
				
				<view class="alert-bar">
					<uni-icons type="sound-filled" size="20" color="#f39c12"></uni-icons>
					<text>当前共有11个设备节能预警需要处理，请及时查看并采取措施</text>
				</view>
				
				<view class="filter-bar">
					<view class="filter-group">
						<text class="filter-label">严重级别：</text>
						<view class="filter-options">
							<view class="filter-tag active">全部</view>
							<view class="filter-tag">正常</view>
							<view class="filter-tag">预警</view>
							<view class="filter-tag">严重</view>
						</view>
					</view>
					<view class="filter-group">
						<text class="filter-label">设备类型：</text>
						<view class="filter-options">
							<view class="filter-tag active">全部</view>
							<view class="filter-tag">生产设备</view>
							<view class="filter-tag">办公设备</view>
						</view>
					</view>
				</view>
				
				<view class="warning-grid">
					<view class="warning-item" v-for="(item, index) in list" :key="index">
						<view class="card-container" :class="[getStatus(item)]">
							<view class="card-header">
								<view class="device-info">
									<text class="device-name">{{ item.name }}</text>
									<text class="device-location">{{ item.location }}</text>
								</view>
								<view class="device-status" :class="[getStatus(item)]">
									<uni-icons :type="getStatusIcon(item)" size="20" :color="getStatusColor(item)"></uni-icons>
									<text>{{ getStatusText(item) }}</text>
								</view>
							</view>
							
							<view class="warning-message" v-if="item.message">
								<uni-icons type="info-filled" size="16" :color="getMessageColor(item)"></uni-icons>
								<text>{{ item.message }}</text>
							</view>
							
							<view class="device-metrics">
								<view class="metric">
									<view class="metric-icon">⚡</view>
									<view class="metric-data">
										<text class="metric-value">{{ item.power }}</text>
										<text class="metric-unit">kW</text>
									</view>
									<text class="metric-label">当前功率</text>
								</view>
								
								<view class="metric">
									<view class="metric-icon">📊</view>
									<view class="metric-data">
										<text class="metric-value">{{ item.usage }}</text>
										<text class="metric-unit">%</text>
									</view>
									<text class="metric-label">利用率</text>
								</view>
								
								<view class="metric">
									<view class="metric-icon">⏱️</view>
									<view class="metric-data">
										<text class="metric-value">{{ item.idleTime }}</text>
										<text class="metric-unit">h</text>
									</view>
									<text class="metric-label">空闲时间</text>
								</view>
							</view>
							
							<view class="device-footer">
								<view class="usage-indicator">
									<view class="usage-bar">
										<view class="usage-progress" :style="{ width: item.usage + '%' }"></view>
									</view>
								</view>
								<view class="recommendation">
									<uni-icons type="star-filled" size="16" color="#27ae60"></uni-icons>
									<text>{{ getSuggestion(item) }}</text>
								</view>
							</view>
							
							<view class="action-bar">
								<button class="action-button">查看详情</button>
								<button class="action-button primary">处理预警</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</layout>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';

	const list = reactive([{
			name: 'AL-001 注塑机',
			location: '一车间',
			power: '108.5',
			usage: '32',
			idleTime: '4.5',
			status: 3,
			message: '设备长期低负荷运行，能效比低于标准值50%'
		},
		{
			name: 'BL-007 空压机',
			location: '动力站',
			power: '75.2',
			usage: '45',
			idleTime: '3.2',
			status: 2,
			message: '空载运行时间过长，建议优化开机时间'
		},
		{
			name: 'CL-014 冲压机',
			location: '二车间',
			power: '65.8',
			usage: '78',
			idleTime: '1.8',
			status: 1
		},
		{
			name: 'DL-023 焊接设备',
			location: '三车间',
			power: '42.3',
			usage: '25',
			idleTime: '5.1',
			status: 3,
			message: '设备效率低下，建议检查运行参数或考虑更换'
		},
		{
			name: 'EL-047 装配线',
			location: '四车间',
			power: '28.6',
			usage: '65',
			idleTime: '2.3',
			status: 2,
			message: '部分区域待机功耗过高'
		},
		{
			name: 'FL-102 研磨设备',
			location: '精密车间',
			power: '18.9',
			usage: '85',
			idleTime: '1.2',
			status: 1
		}
	]);

	const getStatus = (item) => {
		if (item.status === 1) {
			return 'status-normal';
		} else if (item.status === 2) {
			return 'status-warning';
		} else if (item.status === 3) {
			return 'status-danger';
		}
	};
	
	const getStatusIcon = (item) => {
		if (item.status === 1) {
			return 'checkbox-filled';
		} else if (item.status === 2) {
			return 'info-filled';
		} else if (item.status === 3) {
			return 'closeempty';
		}
	};
	
	const getStatusColor = (item) => {
		if (item.status === 1) {
			return '#27ae60';
		} else if (item.status === 2) {
			return '#f39c12';
		} else if (item.status === 3) {
			return '#e74c3c';
		}
	};
	
	const getStatusText = (item) => {
		if (item.status === 1) {
			return '正常';
		} else if (item.status === 2) {
			return '预警';
		} else if (item.status === 3) {
			return '严重';
		}
	};
	
	const getMessageColor = (item) => {
		if (item.status === 2) {
			return '#f39c12';
		} else if (item.status === 3) {
			return '#e74c3c';
		}
		return '#27ae60';
	};
	
	const getSuggestion = (item) => {
		if (item.status === 1) {
			return '设备运行正常，保持当前参数设置';
		} else if (item.status === 2) {
			return '建议调整运行计划，优化能源利用';
		} else if (item.status === 3) {
			return '需立即采取节能措施或进行设备维护';
		}
	};
</script>

<style scoped>
	.energy-warning-container {
		padding: 30rpx;
		min-height: 100vh;
		background: linear-gradient(165deg, #fff8e6, #fff4e0);
	}
	
	.warning-header {
		margin-bottom: 30rpx;
		animation: fadeIn 0.5s ease forwards;
	}
	
	.header-title {
		display: flex;
		align-items: center;
		gap: 16rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 24rpx;
	}
	
	.header-stats {
		display: flex;
		gap: 20rpx;
		overflow-x: auto;
		padding-bottom: 10rpx;
	}
	
	.stat-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: white;
		padding: 20rpx 30rpx;
		border-radius: 16rpx;
		min-width: 150rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(0, 0, 0, 0.05);
	}
	
	.stat-value {
		font-size: 48rpx;
		font-weight: 700;
	}
	
	.stat-card.status-success .stat-value {
		color: #27ae60;
	}
	
	.stat-card.status-warning .stat-value {
		color: #f39c12;
	}
	
	.stat-card.status-danger .stat-value {
		color: #e74c3c;
	}
	
	.stat-label {
		font-size: 24rpx;
		color: #7f8c8d;
		margin-top: 4rpx;
	}
	
	.alert-bar {
		display: flex;
		align-items: center;
		gap: 12rpx;
		background: rgba(243, 156, 18, 0.1);
		border-left: 6rpx solid #f39c12;
		padding: 20rpx;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
		animation: fadeIn 0.5s ease forwards;
		animation-delay: 0.2s;
	}
	
	.alert-bar text {
		font-size: 28rpx;
		color: #7d5207;
	}
	
	.filter-bar {
		background: white;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
		animation: fadeIn 0.5s ease forwards;
		animation-delay: 0.3s;
	}
	
	.filter-group {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 16rpx;
	}
	
	.filter-group:last-child {
		margin-bottom: 0;
	}
	
	.filter-label {
		font-size: 28rpx;
		color: #2c3e50;
		font-weight: 500;
		margin-right: 16rpx;
		min-width: 150rpx;
	}
	
	.filter-options {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}
	
	.filter-tag {
		padding: 8rpx 20rpx;
		border-radius: 100rpx;
		font-size: 24rpx;
		color: #7f8c8d;
		background: #f6f6f6;
		border: 1px solid #e0e0e0;
		transition: all 0.3s ease;
	}
	
	.filter-tag.active {
		background: rgba(39, 174, 96, 0.1);
		color: #27ae60;
		border-color: rgba(39, 174, 96, 0.2);
		font-weight: 500;
	}
	
	.warning-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(450rpx, 1fr));
		gap: 30rpx;
	}
	
	.warning-item {
		animation: fadeIn 0.5s ease forwards;
		animation-delay: calc(0.1s * var(--i, 0) + 0.4s);
	}
	
	.card-container {
		background: white;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(39, 174, 96, 0.12);
		border-top: 4rpx solid #27ae60;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}
	
	.card-container:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 12rpx 30rpx rgba(39, 174, 96, 0.18);
	}
	
	.card-container.status-warning {
		border-top-color: #f39c12;
		box-shadow: 0 8rpx 24rpx rgba(243, 156, 18, 0.12);
	}
	
	.card-container.status-danger {
		border-top-color: #e74c3c;
		box-shadow: 0 8rpx 24rpx rgba(231, 76, 60, 0.12);
	}
	
	.card-header {
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}
	
	.device-info {
		display: flex;
		flex-direction: column;
	}
	
	.device-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
	}
	
	.device-location {
		font-size: 24rpx;
		color: #7f8c8d;
		margin-top: 4rpx;
	}
	
	.device-status {
		display: flex;
		align-items: center;
		gap: 8rpx;
		font-size: 24rpx;
		padding: 6rpx 16rpx;
		border-radius: 100rpx;
		background: rgba(39, 174, 96, 0.1);
		color: #27ae60;
	}
	
	.device-status.status-warning {
		background: rgba(243, 156, 18, 0.1);
		color: #f39c12;
	}
	
	.device-status.status-danger {
		background: rgba(231, 76, 60, 0.1);
		color: #e74c3c;
	}
	
	.warning-message {
		padding: 16rpx 24rpx;
		background: rgba(243, 156, 18, 0.05);
		display: flex;
		align-items: center;
		gap: 10rpx;
		font-size: 26rpx;
		color: #996004;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}
	
	.device-metrics {
		padding: 24rpx;
		display: flex;
		justify-content: space-around;
	}
	
	.metric {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
	}
	
	.metric-icon {
		font-size: 32rpx;
		margin-bottom: 4rpx;
	}
	
	.metric-data {
		display: flex;
		align-items: baseline;
		gap: 4rpx;
	}
	
	.metric-value {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
	}
	
	.metric-unit {
		font-size: 24rpx;
		color: #7f8c8d;
	}
	
	.metric-label {
		font-size: 24rpx;
		color: #7f8c8d;
	}
	
	.device-footer {
		padding: 24rpx;
		background: #fafafa;
	}
	
	.usage-indicator {
		margin-bottom: 16rpx;
	}
	
	.usage-bar {
		height: 12rpx;
		background: rgba(127, 140, 141, 0.1);
		border-radius: 100rpx;
		margin-bottom: 8rpx;
		overflow: hidden;
	}
	
	.usage-progress {
		height: 100%;
		background: linear-gradient(90deg, #27ae60, #2ecc71);
		border-radius: 100rpx;
	}
	
	.recommendation {
		display: flex;
		align-items: center;
		gap: 10rpx;
		font-size: 26rpx;
		color: #27ae60;
	}
	
	.action-bar {
		padding: 20rpx 24rpx;
		display: flex;
		gap: 16rpx;
		border-top: 1px solid rgba(0, 0, 0, 0.05);
	}
	
	.action-button {
		flex: 1;
		height: 70rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f6f6f6;
		color: #2c3e50;
		border: 1px solid #e0e0e0;
	}
	
	.action-button.primary {
		background: linear-gradient(145deg, #27ae60, #2ecc71);
		color: white;
		border: none;
		box-shadow: 0 4rpx 12rpx rgba(39, 174, 96, 0.2);
	}
	
	@keyframes fadeIn {
		from { 
			opacity: 0;
			transform: translateY(20rpx);
		}
		to { 
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@media (max-width: 768px) {
		.warning-grid {
			grid-template-columns: 1fr;
		}
		
		.header-stats {
			flex-wrap: wrap;
		}
		
		.stat-card {
			flex: 1;
			min-width: 110rpx;
		}
		
		.filter-group {
			flex-direction: column;
			align-items: flex-start;
		}
		
		.filter-label {
			margin-bottom: 12rpx;
		}
	}
</style>